<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
  <div id="app">
    <el-row :style="{'margin-top': '10%' }">
      <el-col :md="{'span':12,'offset':6}" :sm="{'span':14,'offset':2}" :xs="{'span':24,'offset':0}">
        <el-row :gutter="20">
          <el-col :md="12" :sm="10" :xs="24" :style="{'text-align': 'center'}" class="hidden-sm-and-up">
            <el-avatar :size="size" :src="avatarUrl" :shape="shape ? 'circle' : 'square'" alt="无"></el-avatar>
          </el-col>
          <el-col :md="12" :sm="14" :xs="24">
            <el-form label-width="120px" label-suffix=":" label-position="right">
              <el-form-item label="文字">
                <el-input v-model="text" type="text" :size="elSize"></el-input>
              </el-form-item>
              <el-form-item label="头像大小">
                <el-input-number v-model="size" :size="elSize" :step="50" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="文字大小">
                <el-input-number v-model="fontSize" :size="elSize" :step="0.05" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="显示文字数">
                <el-input-number v-model="showLength" :size="elSize" :step="1" :min="1" :max="10"></el-input-number>
              </el-form-item>
              <el-form-item label="形状">
                <el-switch :size="elSize" v-model="shape" active-color="#13ce66" inactive-color="#13ce66"
                  active-text="圆形" inactive-text="方形">
                </el-switch>
              </el-form-item>
              <el-form-item>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :md="12" :sm="10" :xs="24" :style="{'text-align': 'center'}" class="hidden-xs-only">
            <el-avatar :size="size" :src="avatarUrl" :shape="shape ? 'circle' : 'square'" alt="无"></el-avatar>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</body>

<script>

  /**
   * 生成ui-avatars链接
   * 
   * @see https://ui-avatars.com/
   * 
   * @param {String} name 文字
   * @param {String} size 头像大小
   * @param {String} fontSize 文字大小
   * @param {String} length 文字显现最大长度
   * @param {String} rounded
   * @param {String} bold
   * @param {String} background 背景色
   * @param {String} color 文字颜色
   * @param {String} uppercase
   * @param {String} format 格式 png; svg
   */
  function getAvatarUrl({ name, size, fontSize, length, rounded, bold, background, color, uppercase, format }) {
    const params = {
      name: name ? name : ' ',
      size: size,
      'font-size': fontSize,
      length: length,
      rounded: rounded,
      bold: bold,
      background: background,
      color: color,
      uppercase: uppercase,
      format: format,
    }
    var queryString = ''
    for (var key in params) {
      if (key && params[key]) {
        queryString += `${key}=${params[key]}&`
      }
    }
    const url = `https://ui-avatars.com/api/?${queryString}`
    console.log('params and url ', params, url)
    return url
  }

  /**
   * 根据文本生成颜色
   */
  function getColorByText(text) {
    var str = '';
    for (var i = 0; i < text.length; i++) {
      str += parseInt(text[i].charCodeAt(0), 10).toString(16);
    }
    if (str.length < 3) {
      return '909399'
    }
    return str.slice(1, 4);
  }

  new Vue({
    el: '#app',
    data: function () {
      return {
        elSize: 'small',
        text: '王大锤',
        size: 200,
        fontSize: 0.55,
        showLength: 1,
        shape: false,
      }
    },
    computed: {
      /** 背景色 */
      avatarBackground: function () {
        return getColorByText(this.text)
      },
      /** 头像链接 */
      avatarUrl: function () {
        return getAvatarUrl({
          name: this.text,
          background: this.avatarBackground,
          size: this.size,
          format: 'png',
          length: this.showLength,
          fontSize: this.fontSize,
        })
      }
    },
    methods: {
    },
    mounted: function () {
      window.VueApp = this
    }
  })
</script>

</html>